<template>
  <div>

    <x-header :left-options="{showBack: true, backText: ''}">积分明细</x-header>

    <div class="point-head-img">

      <img class="head-bg" src="./img/home_bg.png" alt="">

      <img class="avatar-thumbnail" :src="users.avatar||normalImg" alt="">

    </div>

    <div class=" point-info">
      <span class="point">
        我的积分：{{rank.scores||0}}
      </span>
      <span class="rank">
        我的排名：{{rank.rank||0}}
      </span>
    </div>

    <group :title="item.year + '年第'+item.quarter+'季度'" v-for="(item,index) in items" :key="index">
      <cell v-for="(detail,i) in item.details" :key="i" :title="detail.detail" :value="detail.score"></cell>
    </group>

  </div>
</template>

<script>
import { Group, Cell, XHeader } from "vux";
import VScroll from "../pull-refresh";
import { mapGetters } from "vuex";
import api from "../../api/index";

export default {
  name: "Point",
  components: {
    Group,
    Cell,
    XHeader,
    VScroll
  },
  data() {
    return {
      normalImg: require("./img/default-user.png"),
      items: [],
      rank: {},
      users: {}
    };
  },
  methods: {},
  //计算属性
  computed: {
    ...mapGetters(["integralDetails", "integralRanks", "userInfo"])
  },
  //触发事件
  created() {
    /*this.$store.dispatch("getintegraldetails", {
      id: this.$route.params.userid
    });*/
  },
  activated() {
    this.users = this.userInfo;
    this.$store.dispatch("getintegraldetails", {
      id: this.$route.params.userid
    });
  },
  //侦听属性
  watch: {
    integralDetails: function(val) {
      this.items = val;
    },
    integralRanks: function(val) {
      this.rank = val;
    }
  }
};
</script>

<style lang="less">
.point-head-img {
  padding: 2.875rem 0 0;
  .head-bg {
    width: 100%;
    height: auto;
  }
  .avatar-thumbnail {
    display: block;
    width: 41/16rem;
    height: 41/16rem;
    border-radius: 50%;
    margin: -41/16rem auto 0;
  }
}

.point-info {
  text-align: center;
  span {
    line-height: 18px;
    font-size: 16px;
  }
  .point {
    margin-right: 20px;
  }
}
.weui-cells__title {
  font-size: 14/16rem;
}
.vux-label {
  font-size: 18/16rem;
}
.weui-cell__ft {
  font-size: 13/16rem;
  color: rgb(102, 102, 102);
}
</style>
